<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="../11-20/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#ema").blur(function () {
                var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
                if ($(this).val() == "") {
                    $(this).next().replaceWith("<span>邮箱不能为空</span>");
                    $(this).next().css("color", "red");
                } if (reg.test($(this).val())==false){
                    $(this).next().replaceWith("<span>邮箱格式不正确</span>");
                    $(this).next().css("color", "red");
                }
                else {
                    $(this).next().replaceWith("<span>请输入您的常用邮箱</span>");
                }
            });

            $("#nam").blur(function () {
                if ($(this).val() == "") {
                    $(this).next().replaceWith("<span>昵称不能为空</span>");
                    $(this).next().css("color", "red");
                } else if ($(this).val().length < 4 || $(this).val().length > 12) {
                    $(this).next().replaceWith("<span>4-12位字符、英文、数字或者中文均可</span>");
                    $(this).next().css("color", "red");
                } else {
                    $(this).next().replaceWith("<span>4-12位字符、英文、数字或者中文均可</span>");
                }
            });

            $("#pass").blur(function () {
                if ($(this).val() == "") {
                    $(this).next().replaceWith("<span>密码不能为空</span>");
                    $(this).next().css("color", "red");
                } else if ($(this).val().length < 6 || $(this).val().length > 16) {
                    $(this).next().replaceWith("<span>6-16位字符或数字、字母,区分大小写</span>");
                    $(this).next().css("color", "red");
                } else {
                    $(this).next().replaceWith("<span>6-16位字符或数字、字母,区分大小写</span>");
                }
            });
            $("#pass1").blur(function () {
                if ($(this).val() == "") {
                    $(this).next().replaceWith("<span>确认密码不能为空</span>");
                    $(this).next().css("color", "red");
                } else if ($("#pass").val() != $(this).val()) {

                    $(this).next().replaceWith("<span>两次密码不一致</span>");
                    $(this).next().css("color", "red");
                }
            });

            $("#zhuce").click(function () {
                var num=0;
                if ($("#ema").val() == "") {
                    $("#ema").next().replaceWith("<span>邮箱不能为空</span>");
                    $("#ema").next().css("color", "red");
                    num++;
                }

                if ($("#nam").val() == "") {
                    $("#nam").next().replaceWith("<span>昵称不能为空</span>");
                    $("#nam").next().css("color", "red");
                    num++;
                }
                 if ($("#nam").val().length < 4 || $(this).val().length > 12) {
                    $("#nam").next().replaceWith("<span>4-12位字符、英文、数字或者中文均可</span>");
                    $("#nam").next().css("color", "red");
                     num++;
                }


                if ($("#pass").val() == "") {
                    $("#pass").next().replaceWith("<span>密码不能为空</span>");
                    $("#pass").next().css("color", "red");
                    num++;
                }
                if ($("#pass").val().length < 6 || $(this).val().length > 16) {
                    $("#pass").next().replaceWith("<span>6-16位字符或数字、字母,区分大小写</span>");
                    $("#pass").next().css("color", "red");
                    num++;
                 }

                if ($("#pass1").val() == "") {
                    $("#pass1").next().replaceWith("<span>确认密码不能为空</span>");
                    $("#pass1").next().css("color", "red");
                    num++;
                }
                if ($("#pass").val() != $("#pass1").val()) {

                    $("#pass1").next().replaceWith("<span>两次密码不一致</span>");
                    $("#pass1").next().css("color", "red");
                    num++;
                }
                if(num>=1){
                    return false;
                }else {
                    return true;
                }



            });

            });
    </script>

</head>
<body>
<form action="https://www.baidu.com">
    <input type="email" name="ema" id="ema" placeholder="请输入您的常用邮箱"><span>请输入您的常用邮箱</span><br>
    <input type="text" name="name" id="nam" placeholder="请输入昵称"><span>4-12位字符、英文、数字或者中文均可</span><br>
    <input type="password" name="pass" id="pass" placeholder="请输入密码"><span>6-16位字符或数字、字母,区分大小写</span><br>
    <input type="password" name="pass1" id="pass1" placeholder="请再次输入密码"><span></span><br>
    <input type="text" name="yanzhenma" id="yzm" placeholder="请输入右侧验证码"><br>
    <input type="submit" value="注册" id="zhuce">


</form>

</body>
</html>